<!--  -->
<template>
<div class="and">
  <div class="site-base-info">
    <div class="header"><i class="icon-home icon-homeUser"></i>网站信息</div>
    <div class="con">
      <table
        v-loading="loading"
        cellspacing="0"
        cellpadding="0"
        border="0"
        width="100%"
      >
        <tbody>
          <tr>
            <td>
              <span class="fontcol-0">网站状态：</span>
              <span :class="{green:site.status > 0, orange: site.status < 1}">{{site.status > 0 ? '正式账号': '试用账号'}}</span>
            </td>
          </tr>
          <tr>
            <td>
              <span class="fontcol-1">网站类型：</span>
              <span class="green">{{site.type}}</span>
            </td>
          </tr>
          <tr>
            <td>
              <span class="fontcol-2">网站有效期限：</span>
              <span>截止至 {{site.expiry | dateformat('YYYY-MM-DD')}}</span>
            </td>
          </tr>
          <tr>
            <td>
              <span class="fontcol-3 fl">语言支持：</span>
              <div class="langv">
              <template v-if="site.languages">
                <span
                  v-for="item in site.languages"
                  :key="item.site_id"
                  class="language-item"
                >
                  <span class="language-name">{{item.language_name}}</span>
                  <span
                    class="orange"
                    v-if="parseInt(item.site_status) != 1"
                  >系统关闭</span>
                  <span
                    v-else
                    class="op"
                    @click="changeStatus(item.site_id)"
                  >
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="parseInt(item.s_config_status) > 0? '点击关闭该语言站点': '点击开启该语言站点'"
                      placement="top-start"
                    >
                      <span :class="{green:parseInt(item.s_config_status) > 0, red: !parseInt(item.s_config_status) > 0}">
                        {{parseInt(item.s_config_status) > 0? '[已开启]': '[已关闭]'}}
                      </span>
                    </el-tooltip>
                  </span>
                </span>
              </template>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <span class="fontcol-4">网站IP：</span>
              <span>{{site.ip}}</span>
            </td>
          </tr>
          <!-- <tr>
            <td>
              <span class="fontcol-4">默认绑定域名：</span>
              <el-tooltip
                class="item"
                effect="dark"
                content="点击访问"
                placement="top-start"
              >
                <span class="blue "><a
                    :href="'http://'+site.domain"
                    target="_blank"
                  >{{site.domain}}</a></span>
              </el-tooltip>
            </td>
          </tr> -->
          <tr>
            <td>
              <span class="fontcol-5 fl">绑定域名：</span>
              <div class="ml5em">
                <span v-if="site.bind_domain.length < 1">未绑定任何域名 <span v-if="site.status < 1">（且试用账号无法绑定域名）</span></span>
                <div v-else>
                  <p
                    v-for="item in site.bind_domain"
                    :key="item.id"
                    class="bind-domain"
                  >
                    <span v-html="capitalize(item.status)"></span><span class="name">{{item.domainName}}</span>
                    <a :href="beianLink" target="_blank" v-if="item.status === 2 && beianLink" class="btn-a">提交备案</a>
                  </p>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <UseRateMsg />
</div>
</template>

<script>
import UseRateMsg from '@/components/main/user/welcome/UseRateMsg.vue'
export default {
  data () {
    return {
      site: {
        status: '',
        type: '',
        expiry: '',
        languages: [],
        domain: '',
        bind_domain: [],
        ip: ''
      },
      loading: true,
      beianLink: ''
    }
  },
  created () {
    // 请求获取信息
    this.$post('/site/baseinfo').then(
      response => {
        this.site.status = response.status
        this.site.type = response.type
        this.site.expiry = response.expiry
        this.site.languages = response.languages
        this.site.domain = response.domain
        this.site.bind_domain = response.bind_domain
        this.site.ip = response.ip
        this.loading = false
      },
      error => {
        console.error(error)
      }
    )
    // 请求备案链接
    this.$post('/host/beian-link').then(
      response => {
        if (response) {
          this.beianLink = response
        }
      },
      error => {
        console.error(error)
      }
    )
  },
  methods: {
    capitalize (value) {
      value = parseInt(value)
      if (value === 0) {
        return '<span>[未审核]</span>'
      } else if (value === 1) {
        return '<span class="green">[已备案]</span>'
      } else if (value === 2) {
        return '<span class="orange">[未备案]</span>'
      }
      return '[未知]'
    },
    changeStatus (siteId) {
      siteId = parseInt(siteId)
      let language = null
      for (let i in this.site.languages) {
        let item = this.site.languages[i]
        if (parseInt(item.site_id) === siteId) {
          language = item
        }
      }
      if (!language) {
        return
      }
      if (parseInt(language.site_status) !== 1) {
        return
      }
      this.loading = true
      this.$post('/site/change/sitestatus', {
        sconfigid: language.s_config_id
      }).then((response) => {
        if (response && response.languages) {
          this.site.languages = response.languages
        }
        this.loading = false
      })
    }
  },
  computed: {

  },
  components: {
    UseRateMsg
  }
}

</script>
<style scoped lang="scss">
.and {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}
.site-base-info {
  border: 1px solid #e5e5e5;
  width: 34%;
}
.site-base-info .header {
  padding: 10px 15px;
  background-color: #eeeeee;
}
.site-base-info .con {
  padding: 15px;
  font-size: 13px;
}
.site-base-info .green {
  color: green;
}
.site-base-info table td {
  padding: 4px 0;
}
.site-base-info .fontcol-3.fl{
  float: left;
}
.site-base-info .langv{
  margin-left: 5.3em;
}
.site-base-info table .language-item {
  margin-right: 12px;
  white-space: nowrap;
  display: inline-block;
  margin-bottom: 5px;
}
.site-base-info table .language-item .op {
  cursor: pointer;
}
.site-base-info .fl {
  float: left;
}
.site-base-info .ml5em {
  margin-left: 5.3em;
}
.site-base-info table .bind-domain {
  font-size: 14px;
  text-align: justify;
  text-justify: inter-ideograph;
}
.site-base-info table .bind-domain .name {
  margin-left: 12px;
}
.btn-a{
  font-size: 13px;
  margin-left: 15px;
}
</style>
